<!--oem代理——套餐列表（未使用）-->
<template>
  <div class="ele-body">
    <el-form
      :hide-required-asterisk="true"
      ref="form"
      :model="form"
      label-width="80px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <el-card
        header="套餐列表"
        shadow="never"
        body-style="padding: 30px 22px;"
      >
        <el-row :gutter="15">
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="6" :xl="6">
            <el-form-item label="套餐名称">
              <el-input
                v-model="form.packageName"
                placeholder="请输入套餐名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="12" :lg="6" :xl="6">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="datetime"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="ele-fluid"
                @change="select"
              />
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="6" :xl="6">
            <el-form-item label="套餐天数" class="delInput">
              <el-input
                type="number"
                v-model="form.packageDays"
                placeholder="请输入套餐天数"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="6" :xl="6">
            <el-form-item label="套餐价格" class="delInput">
              <el-input
                type="number"
                v-model.number="form.packagePrice"
                placeholder="请输入套餐价格"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="m-top10">
          <el-col  :xs="12" :sm="12" :lg="12" :xl="12">
            <!--class="colorBlue"-->
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              @click="see()"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <el-card class="m-top10 p-algin10"
             shadow="never">
      <table-list
        ref="table"
        :form="form"
      />
    </el-card>
  </div>
</template>

<script>
  import tableList from './components/table-list.vue';
  export default {
    name: "index",
    components: {tableList},
    data() {
      return {
        form: {},
        datetime:[]
      }
    },
    methods:{
      see(){
        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },
      resetting(){
        this.datetime=[]
        this.form={}
        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },
      select(e){
        console.log("日期选择e============",e,'form.datetime',this.form.datetime)
        if(this.datetime){
          console.log("日期选择e============",e,'form.datetime',this.datetime)
          Object.assign( this.form, {
            startTime:  this.datetime[0],
            endTime:  this.datetime[1]
          })
        }
      },
    }
  }
</script>

<style scoped>
  /*隐藏input（type=number)右边的小箭头*/
  /deep/.delInput input::-webkit-outer-spin-button,
  /deep/.delInput input::-webkit-inner-spin-button {
    -webkit-appearance: none!important;
  }
  /deep/.delInput input[type="number"]{
    -moz-appearance: textfield;
  }
</style>

